Add mega menu content layout and styles #1338

KaichenWang · 2022-02-09T22:04:16Z

Why are these changes introduced?

Part of #947

What approach did you take?

Add grid layout to mega menu content

Leverage CSS grid to set 6 columns

Style links

Leverage utility classes as much as possible:
- .caption-with-letter-spacing--medium
- .uppercase
- .link
Add remaining styling in component-mega-menu.css

Set mega menu max-height

Max-height is determined by var(--header-bottom-position)
var(--header-bottom-position) value is set in JS when the header section is rendered
Ensures long list of links within the mega menu can be reached via scroll

Other considerations

Mega menu is WIP, do not merge into main
⚠️Noticed occasional animation flickering when opening menus. Currently investigating.

Testing steps/scenarios

Refer to "Testing steps/scenarios" in Add mega menu #1316 (comment) for general steps
Test with menus of various size and depth. Menus can be edited and created in the admin under Online Store -> Navigation

Screenshot

Visual
- Layout
- Spacing
- Link styling
Active state: After navigating to a page using the mega menu, verify whether an active state (underline) is present for the link in the mega menu corresponding to the current page.

Screenshot

a11y
- Mega menu content can be expanded via keyboard navigation
- All links in the mega menu can be accessed via keyboard navigation
- Mega menu content can be closed with esc key
- All links in the mega menu can be accessed when zoomed in to 200%

Demo links

Store
Editor

Checklist

…add-mega-menu-content # Conflicts: # assets/component-mega-menu.css

…t role

… bottom position set in JS for calculation

…her instances where --header-bottom-position value is set in JS

…add-mega-menu-content

KaichenWang · 2022-02-11T22:28:03Z

To confirm

Specifications

Implemented:

✅ Content width = Grid width 
✅ Max number of colums: 6  

Not implemented:

⚠️ Max character limit per menu item: 25

Since there is no such limitation in the admin when creating link labels, truncating at 25 characters may be unexpected behaviour for merchants
This would apply for all locales. A 25 character limit may not make sense for all languages

⚠️Max # of parent menu: 12

Since there is no such limitation in the admin when editing level 2 children, this limit may be unexpected behaviour for merchants

⚠️Max # of children menu: 13 (when there   are ≤6 parents.) 

Since there is no such limitation in the admin when editing level 3 children, this limit may be unexpected behaviour for merchants

⚠️ Max menu height: 538px 

As an alternative, the max-height of the mega menu content is dynamically set to total vertical screen size - header size and will be scrollable if links exceed this max-height (or if zoomed in)

cc: @duygukalaycioglu

duygukalaycioglu · 2022-02-14T22:57:49Z

Thanks Kai for sharing details about the annotations that are not implemented, much appreciated!

Max character limit per menu item: 25
Aligned with max character limit for consistency.
Max # of children menus:
The reason for this max limitation for children menus was that we wouldn’t want the mega menu to go longer than 768px but since we don’t know if the merchant will end up with a long menu as a result of parents or children, I’m aligned with this as well.
Max menu height: 538px
As an alternative, the max-height of the mega menu content is dynamically set to total vertical screen size - header size and will be scrollable if links exceed this max-height (or if zoomed in)

Sounds good! I'll test this further.

cc: @nicklepine @danielvan

duygukalaycioglu · 2022-02-14T23:39:24Z

⚠️ Max # of parent menu: 12
Since there is no such limitation in the admin when editing level 2 children, this limit may be unexpected behaviour for merchants.

I'm not sure about this one. Does this mean the header can have 2 lines of navigation links? Is this allowed with the dropdown menu?

duygukalaycioglu · 2022-02-15T00:50:48Z

Test with menus of various size and depth. Menus can be edited and created in the admin under Online Store -> Navigation

Visual

Layout
Spacing
Link styling
Active state: After navigating to a page using the mega menu, verify whether an active state (underline) is present for the link in the mega menu corresponding to the current page.
Mega menu content can be closed with esc key

KaichenWang · 2022-02-15T19:14:39Z

I'm not sure about this one. Does this mean the header can have 2 lines of navigation links? Is this allowed with the dropdown menu?

@duygukalaycioglu Short answer is yes, this was already possible with "dropdown" style menus and is still possible with mega menu.

From a technical perspective, it's possible to limit the # of links to display on the storefront, but this creates problems:

1 - The merchant editing the navigation in the admin would not be aware of this limit. So there might be a discrepancy between their menu in the admin and the menu that appears in their theme, which may cause unnecessary confusion.

2- If we limit # of links, it is still technically possible for the menu to wrap onto 2 lines based on label length, text size scaling, screen size, and zoom. So this isn't something we can prevent altogether.

Perhaps it's best to educate merchants instead of preventing this altogether in code.

tyleralsbury · 2022-02-15T19:35:23Z

My two cents regarding the menu wrapping:

Number of links is not enough to create any sort of guarantee. I can have a top level element called “Nepalese Special Finest Tippy Golden Flowery Orange Pekoe Black Tea” and it counts as a single link, and yours might just be "Tea". Trying to base anything on the number of links will fail because of this.

I personally feel as though this falls under our web native principles - sometimes trying to force things to conform to a specific look comes at the expense of a clean implementation and is a detriment to the overall experience from all sides of the equation. Allowing this to flow naturally from one line to the next leverages a simple approach - a single CSS property - and does still give the merchant the ability to adjust the look of it by adjusting the menu in the navigation part of the admin.

Rather than forcing a hard limit, we just allow it to wrap and if they don’t like the look of it, they can reduce the number of elements in their menu.

That said, we could also allow them to have a hamburger menu on desktop so they can have a lot of top level menu items without it wrapping

nicklepine · 2022-02-15T19:55:33Z

Hi hi! Some feedback from @valeriegohier and I. After playing with it a bit this morning- we're wondering if there is not a possibility to tune up a bid more the sense of hierarchy between the second and third level links: https://screenshot.click/15-52-qitti-ws4wd.png

Potential options:

Scale up / down the font size of the Second level link.
Play with opacity of the label for the second level link?
Use heading font for the second level link.
A decorative element like a line under the second level link.

Can be tackled separately to not block the PR from shipping.

Examples:

duygukalaycioglu · 2022-02-15T20:12:36Z

Thank you for sharing the feedback along with options @nicklepine - much appreciated!
Posting my thoughts per option:

Scale up / down the font size of the Second level link.
We are currently using Dawn's type scale, I would advise against inconsistent or additional styles and keeping a consistent scale across the headlines and body.

Play with opacity of the label for the second level link?
We actually explored opacity in first rounds of design. One current blocker with styling is:
" With the current settings no, all children is created in the same way. Merchants has the flexibility to add, not add “shop all” links and name them differently as well. (i.e. all skirts)"

Use heading font for the second level link.
Could you elaborate more on this? do you mean we use a larger font on the second level links?

A decorative element like a line under the second level link.
We are currently using the underline for hover and click states to indicate the buyer where they are at. I would advise against adding decorative elements, we need to also be consistent with Dawn's minimalistic art direction.

cc: @valeriegohier

duygukalaycioglu · 2022-02-15T21:18:23Z

@nicklepine @KaichenWang and I had aligned on going with opacity change for headlines.
– use %50 opacity for headlines.

KaichenWang · 2022-02-16T15:44:19Z

use %50 opacity for headlines.

@duygukalaycioglu Just wanted to clarify:

The body text (level 3 link) is already set to 75% of the "Text color" setting. We want to set the heading (level 2 link) to 50% of the "Text color" setting?

duygukalaycioglu · 2022-02-16T19:20:31Z

@KaichenWang Thanks for double-checking! Yes, we want to set the heading (level 2 link) to 50% of the "Text color" setting.

KaichenWang · 2022-02-16T20:56:23Z

Yes, we want to set the heading (level 2 link) to 50% of the "Text color" setting.

Updated!

danielvan · 2022-02-17T13:46:22Z

@KaichenWang Thanks for double-checking! Yes, we want to set the heading (level 2 link) to 50% of the "Text color" setting.

Does this work across multiple use cases for accessibility?
50% opacity seems dangerous. A full black type with 50% opacity would only clear opacity over white for Large Text.
Tested this with Stark on Figma.

duygukalaycioglu · 2022-02-17T14:16:42Z

@danielvan good point! The A11Y reviews hasn't started yet. cc: @svinkle

When I tried %75 - we weren't able to achieve the contrast @nicklepine requested between the headline and body, but %60 seems to be passing webAIM's contrast checker.

svinkle · 2022-02-17T17:58:25Z

The summary is missing its aria-controls attribute which would point to the corresponding div.
Can we re-add the role="list" to the inner ul? These would be worthy of explicitly conveying the list item count when discovering the list.
Heading color contrast is missing the mark at 3.54:1.

Could we consider the opposite treatment of keeping the default color opacity with bold style? This provides a visual affordance of a "heading" text (even though they aren't heading elements which is okay) and high contrast.

duygukalaycioglu · 2022-02-17T20:30:37Z

we had a quick discussion on possible explorations, and aligned on going back to the initial design solution.

no bold, no opacity change. achieving the hierarchy with all caps for headings. (level 2)
reasons why: consistent with dawn's text style and scale, passes accessibility

cc: @danielvan @nicklepine @svinkle

KaichenWang · 2022-02-23T19:55:44Z

@duygukalaycioglu

Level-2 links with no children

We received a feedback regarding to the use case and all caps text style where there are no 3rd level navigation per specific parents such as "About us".

This is the solution we aligned on: Collapsing to a single column when there are no level 3 links with liquid property and using the level 3 text styling instead of all caps.

I understand the rationale to remove all caps when there are no level-3 links, but what's the rationale for changing the layout to single column? Changing to single-column would cause other issues:

1 - Visual imbalance - the level-2 links are aligned to the far left with potentially a lot to whitespace on the right
2 - This could create a disconnect between the navigation editing experience in the admin and the storefront. It may not be clear to a merchant why the layout changes from 1-column to multi-column when level-3 links are added

Alternatively, we could remove all caps, but retain multiple columns. Is this a potential solution to consider?

Additional discussion on columns

⚠️ Personally, I think this is out of scope for MVP, but a few reviewers have brought up whether we want to enforce a 6 column grid at all times or whether we could:

1 - allow columns to take up more space when there are less than 6
2 - add a column number setting

I created a demo to show what "auto-fit" grid (solution 1) could look like but essentially:

6-column grid

"auto-fit" grid

duygukalaycioglu · 2022-02-23T20:32:49Z

Alternatively, we could remove all caps, but retain multiple columns. Is this a potential solution to consider?

Removing all caps will have an impact on the text style for headers, we'll loose the hierarchy between the header and children. So, it creates another problem while it can be solution for the children.

I understand the rationale to remove all caps when there are no level-3 links, but what's the rationale for changing the layout to single column? Changing to single-column would cause other issues:

Great question, I was imagining that they would share the same styling and positioning with the children with parents. But, now I understand that the liquid property doesn't hide the parents, but it changes the text style for this instance.

1 - Visual imbalance - the level-2 links are aligned to the far left with potentially a lot to whitespace on the right

I don't see an issue with the white space, there might be too few links that might create white space as well. @nicklepine and I were thinking that this will be good base for the future iterations we are exploring like using the other columns for images, or promotion pieces. (see example below)

2 - This could create a disconnect between the navigation editing experience in the admin and the storefront. It may not be clear to a merchant why the layout changes from 1-column to multi-column when level-3 links are added.

Good point, I agree having them spread out horizontally aligns with how the merchant will create parent levels. @nicklepine what are your thoughts on @KaichenWang 's suggestion?

nicklepine · 2022-02-23T22:03:07Z

I love the autofit exploration! But I dont think they would necessarily align with the first level links on the header, outside of the dropdown.

I'm good to do auto-fit as a future iteration.

danielvan · 2022-02-24T12:25:08Z

This is the solution we aligned on: Collapsing to a single column when there are no level 3 links with liquid property and using the level 3 text styling instead of all caps.

I do struggle a lot with this alignment. If this is the only option to launch, I'm ok with it but not a big fan. We wouldn't be able to align it with the parent or show the smaller dropdown in case there are no children?

KaichenWang · 2022-02-24T16:29:06Z

I do struggle a lot with this alignment. If this is the only option to launch, I'm ok with it but not a big fan.

Another option would be to preserve multiple columns in all scenarios. This would actually be the simplest to currently implement from a technical perspective. More details #1338 (comment)

We wouldn't be able to align it with the parent

This would require some significant rework of the current MVP implementation

or show the smaller dropdown in case there are no children?

This was actually the initial solution, but this behaviour was removed #1316 (comment)

duygukalaycioglu · 2022-02-25T19:53:35Z

Outcomes from our alignment meeting this morning:

Use bold treatment for L2 nav links.
mix of L2s with L3 x without L3s
L2 without L3s: - To keep a consistent editing and building experience for our merchants, keep the L2 nav links without L3s retained as multi-columns but not as a single column
We have also aligned on to park auto-fit for Mega Menu 2.0.

cc: @danielvan @nicklepine

… value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000

KaichenWang · 2022-02-28T16:53:29Z

@duygukalaycioglu

I've updated L2 font-weight to bold.

Outcome

If in the editor a "regular" body font is selected, the visual hierarchy is present.

⚠️ However, if in the editor a "bold" body font is selected, the visual hierarchy is lost. This is definitely a concern, since there's no way to make the L2 link more "bold", since it's already at the maximum allowed CSS font-weight value.

Update

Decision

No action needed. This behaviour can be avoided with workarounds:

Use regular or light body font
Input L2 link labels in all caps in admin (to create hierarchy)
Select "dropdown" style menu

Will revisit if necessary post-MVP

KaichenWang · 2022-03-01T15:16:00Z

@duygukalaycioglu I thought that the Menu type is automatically optimized for mobile should always be displayed as a reminder that the mobile menu isn't affected by this setting. Link to original decision on this: #1316 (comment)

If this isn't the case, I can remove it

katycobb · 2022-03-01T16:50:16Z

@duygukalaycioglu I thought that the Menu type is automatically optimized for mobile should always be displayed as a reminder that the mobile menu isn't affected by this setting. Link to original decision on this: #1316 (comment)

If this isn't the case, I can remove it

That's right Kai! D and I connected yesterday and we're aligned. I think she removed her comment but you might have still gotten a notification.

ludoboludo

Looks good 👍 tested with voice over, keyboard nav, on iOS and Safari.

gregjotau · 2022-03-03T16:36:20Z

Looks good 👍 tested with voice over, keyboard nav, on iOS and Safari.

Will test this immediately on merge @ludoboludo , you rock! 🚀 (and the rest of the Dawn team)

martinamarien

Overall. Looks good. Left a few comments, but wouldn't consider them blockers.

Tested:

All menu positions
Safari, Chrome, Firefox
Mobile iOS and Mobile Android
Mega menu + dropdown on various templates
Tested with and without sticky header
Tested VO, keyboard, reduce motion and no-js

martinamarien · 2022-03-04T19:37:19Z

sections/header.liquid

@@ -417,7 +417,7 @@
        </nav>
      {%- else -%}
        <nav class="header__inline-menu">
-          <ul class="list-menu list-menu--inline" role="list">
+          <ul class="list-menu list-menu--inline">


Based on Scott's comment, I think we need to re-add the role="list" here.

Updated cff04b6

martinamarien · 2022-03-04T20:58:32Z

sections/header.liquid

+  const header = document.querySelector('header');
+  if (header) document.documentElement.style.setProperty('--header-bottom-position', `${Math.floor(header.getBoundingClientRect().bottom)}px`);


This is the only piece of javascript not wrapped in a class or custom element inside of {% javascript %}. For consistency, should we? Also, this will run, even if we have no menu or don't have any mega dropdowns present.

martinamarien · 2022-03-04T21:10:42Z

assets/component-mega-menu.css

  background-color: rgb(var(--color-background));
  border-left: 0;
  border-radius: 0;
  border-right: 0;  
  left: 0;
-  padding-bottom: 3.2rem;
-  padding-top: 3.2rem;
+  max-height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 200px) - 4rem);


Is there a benefit to using px as the default vs. rem in the default value case for the css variable?

Updated to rem 630713d

martinamarien · 2022-03-04T21:15:28Z

assets/component-mega-menu.css

+  padding-bottom: 0.8rem;
+  padding-top: 0.8rem;
+  text-decoration: none;
+  text-underline-offset: 0.3rem;


This property is applied for all .link elements.
If you'd like, you can remove it since it gets overwritten.

Updated fb5671f

selvanwitap · 2022-03-06T06:09:49Z

@martinamarien where I can see the demo output for this?
@duygukalaycioglu this was completed done ?

gregjotau · 2022-03-06T16:43:18Z

@martinamarien where I can see the demo output for this? @duygukalaycioglu this was completed done ?

I tested on konstella.no (test site), but it is not merged yet, will probably be merged on Monday.

…s are removed some assistive technologies may not convey ul as list without explicit role)

KaichenWang · 2022-03-07T18:46:49Z

@martinamarien

This is the only piece of javascript not wrapped in a class or custom element inside of {% javascript %}. For consistency, should we?

I feel there's no need to introduce the overhead of a class/custom element in this case.

Also, this will run, even if we have no menu or don't have any mega dropdowns present

Correct, I don't think this should be exclusively tied to the mega menu. I think even "dropdown" style menu could eventually leverage this css variable to set a max-height of its own.

* Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com>

* Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com>

* Add "Maximum Products to Show" setting to Product Recommendations section (Shopify#1429) * Add missing gradient support (Shopify#1304) * Add missing gradients to cards * Enforce solid bg on quantity input * Add gradient to cart notification * Add to nav, img banner, facets, slideshow, etc * Add to media modal * Add to submenu * Remove search popup gradient * Fix mobile facets scrolling/background * Adjust mobile nav gradients * Cleanup * fix border radius on combination inputs * Fix password page email signup input (Shopify#1421) * Setup theme-check GitHub annotations (Shopify#1422) * test something real quick (Shopify#1467) * Cleanup product media grid spacing (Shopify#1444) * Cleanup product media grid * Adjust grid selectors * Hopefully fix arrow alignment * Fix non-stacked item widths * Update color list order and simplify section string (Shopify#1413) * update color list order * change announcement bar string * fix label * update collapsible content * update email signup banner * update footer * update header * update image banner * update image with text * update password header and footer * update email signup * update rich text and slideshow * update missing translations * Update 20 translation files * Update sections/announcement-bar.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Add mega menu (Shopify#1316) * Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com> * Update translations: merchant (Shopify#1474) * Update 1 translation file (Shopify#1475) * Center align payment terms form text when there is no image (Shopify#1473) * Add grid settings to collections list (Shopify#1469) * Feat. collection updates (Shopify#1295) * Update 20 translation files (Shopify#1487) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Theme check manual fixes (Shopify#1379) * Clean up behaviour when there are only L2 links mega menu (Shopify#1492) * Center mega menu (Shopify#1482) * Update 1 translation file (Shopify#1499) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Video alt text info content update (Shopify#935) * Video alt text info content update * Update locales/en.default.schema.json * Update locales/en.default.schema.json * Update 4 translation files * Update 3 translation files * Update 9 translation files * Update 3 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Adjust color contrast for Vendor on the cart page (Shopify#1462) * Add support for boolean filters (Shopify#1456) * Fixed condensed mega menu (Shopify#1504) * Fixed condensed mega menu * Fixed bug where product page thumbnail slider arrows were appearing when they shouldnt (Shopify#1510) * Fixed multicolumn gap spacing on mobile (Shopify#1505) * Fixed multicolumn gap spacing on mobile * Fixed max price display on filter drawer (Shopify#1512) * Theme check TemplateLength (Shopify#1511) * Add PR checkbox for theme documentation (Shopify#1516) * Add PR checkbox for theme documentation * Update .github/PULL_REQUEST_TEMPLATE.md * Update 1 translation file (Shopify#1517) * Update 1 translation file (Shopify#1528) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1533) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1536) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Quick Add (Shopify#1388) * Featured Collection : Fix max width setting (Shopify#1538) * Fix product rating help doc links (Shopify#1532) * fix links for product rating * Update 20 translation files * update os2 links and remove /en * update other URL to remove the language path * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Prevent empty heading in contact form (Shopify#1515) * Only render contact heading if not empty * Add fallback form heading * Move title string * Update 21 translation files * Update 3 translation files * Update 6 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Move slideshow control buttons when set to autorotate (Shopify#1523) * Update 1 translation file (Shopify#1554) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Hide inactive mobile menu items from screen readers (Shopify#1493) * Hide mobile menu ancestors from screen readers * Account for close button * Cleanup on drawer close * Account for mobile facets drawer * Vertical filter (Shopify#1443) * Remove transforms from image with text content (Shopify#1560) * Fix shop link on giftcard page (Shopify#1557) Co-authored-by: Max@SMAKK <max-smakk@MacBook-Pro-4.local> * Using font size and spacing for mega menu hierarchy (Shopify#1520) * Using font size and spacing for mega menu hierarchy Co-authored-by: LucasLacerdaUX <lucas.lacerda@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update translations: buyer (Shopify#1581) * Update 1 translation file * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Quick Add: Fix button overflow on mobile carousel (Shopify#1567) * Update spacing (Shopify#1588) * Vertical filter UX follow ups (Shopify#1568) * Vertical filter follow ups * Fix button alignment * Fix search sort * Fix sort * Fix wrapping * Fix overflow * Fix empty space * Fix button no js * Fix button style * Fix filter column * Apply secondary style * Apply button * Fix search * Fix no-js layout for drawer and product count position (Shopify#1572) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Update margin formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Update padding formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Add hidden inputs to preserve search queries (Shopify#1585) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Add hidden inputs to preserve search queries Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Version bump v5.0.0 (Shopify#1624) * Remove unused setting (Shopify#1617) * Update 5 translation files (Shopify#1626) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1634) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Remove recaptcha visibility hidden on contact form (Shopify#1637) * Fix Product strucure-data markup for Brand property (Shopify#1600) * Fix empty collection links (Shopify#1639) * Fix first image lazy load on main product section (Shopify#1286) * Make sure first image is not lazy loaded * Use a single liquid tag * Update sections/main-product.liquid Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * replace the hex code by currentColor (Shopify#1591) * Cart drawer (Shopify#1544) * Fix button spinner in Safari (Shopify#1646) * Rich text improvements (Shopify#1635) * [Header] add setting to tweak top and bottom padding (Shopify#1654) * Add header padding setting * Update minimum to 5 * Changed defaults * Update header with option 2 * Remove unnecessary code * Update translations: buyer (Shopify#1659) * Update translations: merchant (Shopify#1681) * Remove gradient when slide container is set to be hidden on desktop (Shopify#1643) * Revert flex grow on collage card__content (Shopify#1662) * Update minimum header padding to zero (Shopify#1688) * Fix a typo in main-product.liquid (Shopify#1647) * 1-click Quick Add for products with 1 non-default variant (Shopify#1610) * Add 1-click quick-add support for products with exactly 1 non-default variant * Revert "Add 1-click quick-add support for products with exactly 1 non-default variant" This reverts commit 41648ca. * Add 1-click quick-add support for products with exactly 1 non-default variant * Switch to Variants Size * Update spacing below product media (Shopify#1689) * Update spacing below product media * Update visible * Remove extra spacing * Update desktop layout * Revert button type and button 1 ids (Shopify#1705) * Update Banner image and logo Image to use `image_tag` (Shopify#1701) * Fix product media slider peek (Shopify#1696) * Account for gap spacing in product slider width * Prevent slider arrows with single media * Remove alt text to improve screen reader experience (Shopify#1679) * Update Subtotal header for a11y (Shopify#1680) * Remove extra whitespace on Quick Add modals (Shopify#1706) * Always centered * Non centered * Revert height * Set height to initial height * Revert fixed height * Remove extra * Update 1 translation file (Shopify#1715) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Collapsible content] Add vertical padding to blocks (Shopify#1655) * Fix padding. top and bottom now gets 1.5rem * Set padding-top to 0 * Fix syntax error caused by missing calc in product CSS (Shopify#1703) * Update 1 translation file (Shopify#1739) * Cart drawer section fix (Shopify#1742) * Update translations: merchant (Shopify#1757) * Version bump v6.0.0 (Shopify#1769) * Version bump Update theme version to v6.0.0 * Update release-notes.md * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> * Update release-notes.md Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Fix box shadow being cut off on sliders (Shopify#1772) * Update contact-form.liquid (Shopify#1716) * Update main-cart-items.liquid (Shopify#1717) * Update main-collection-banner.liquid (Shopify#1718) * Remove menu title requirement (Shopify#1763) * Menu heading Remove requirement for menu heading in footer to display * Update footer.liquid * Remove helper text * Remove translations * Update footer * Update footer * Update footer * Update footer * Revert changes * Fixes * Update * Update to footer * Badge padding update (Shopify#1785) * Add video button aria label (Shopify#1728) * Change aria for active pagination nav control (Shopify#1727) * Update 1 translation file (Shopify#1809) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Warn users that link opens in a new window (Shopify#1735) * Add unique ids to card-product.liquid headings and product state badges (Shopify#1731) * Badge product card position copy update (Shopify#1795) * Badge product card position copy update * Update 7 translation files * Update 3 translation files * Update 6 translation files * Update 3 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Distinct View All IDs for screen readers (Shopify#1733) * Fix Quick Add when cart type is set to Page (remove data-cart-type) (Shopify#1817) * Replaced a missing </div> tag in main-search.liquid (Shopify#1804) * version bump to 6.0.2 (Shopify#1819) * Add help text to the Variant Pills settings area (Shopify#1782) * Add help text to the Variant Pills settings section. * Update copy as per reviews. * Update 5 translation files * Update 4 translation files * Update 8 translation files * Update 2 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update translations: buyer (Shopify#1828) * Update 1 translation file * Update locales/th.json Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Update translations: merchant (Shopify#1818) * Update 1 translation file * Update 1 translation file * Update 1 translation file * Update locales/th.schema.json * Update 1 translation file * Update th.schema.json Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Remove duplicate .hidden class in base.css (Shopify#1811) * Setting border-top to 0.1rem to match with header navigation (Shopify#1802) updating component-facets.css to match div line width from the header * Add period to Cart global setting info text (Shopify#1751) * add period to info text * Update 1 translation file * Update 9 translation files * Update 9 translation files * Update 1 translation file Co-authored-by: Melissa Perreault <melissaperreault@Melissas-MacBook-Pro.local> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add focus ring/border in Windows High Contrast mode (Shopify#1729) * Update 1 translation file (Shopify#1836) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Announcment alignment (Shopify#1770) * Announcement and translation * Alignment for announcement bar * Translations * Update alignment and order of options. * Update locales/th.schema.json Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * Uniform padding with link * Make colour go full width * Full width hover and justify text * Update sections/announcement-bar.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> * Remove justify * Remove justify Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Add pagination to main collection list (Shopify#1745) * Jsonify customer sections (Shopify#1640) * Update translations: merchant (Shopify#1843) * Update 20 translation files * Update 1 translation file * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1849) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update PULL_REQUEST_TEMPLATE.md * Remove CLA from probot and use new GitHub action (Shopify#1859) * Update 1 translation file (Shopify#1862) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add `reopened` activity type (Shopify#1874) * add vendor to popup notification when vendor checkbox is checked (Shopify#1870) * Add proper product title to data-shopify-title (Shopify#1858) * Update 1 translation file (Shopify#1872) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Use param_name instead of label to construct an id for filter values (Shopify#839) * Fix linting issues in feature-product and main-product sections (Shopify#1873) * fix linting issues in feature-product and main-product sections * use button--secondary when dynamic checkout or subscriptions enabled (Shopify#1875) * [Card Settings] Break card global settings into Blog, Collection and Product Cards (Shopify#1774) * [Header] New logo position (Shopify#1864) * update predictive search container width (Shopify#1878) * update predictive search container width on small screens * Update 20 translation files (Shopify#1891) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Fix filter bug to allow filters to be removed (Shopify#1890) * [Product layout] Add desktop media position (Shopify#1720) * Update 2 translation files (Shopify#1896) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Switch blog header img to eager instead of lazy load (Shopify#1894) * Update 1 translation file (Shopify#1899) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * fix(sections/header): remove duplicated classnames (Shopify#1853) * change done in pickup availability (Shopify#1831) * Fix spaces in menu IDs by replacing titles with handles (Shopify#1846) * Increase left and top edge for zoom-icon element (Shopify#1902) * Increase left and top edge for zoom-icon element * Minor changes that I forgot undo * Delete unnecessary whitespace * Change left and top edges to 1.2rem * fix: drawer - typing in quantity and pressing enter empties cart (Shopify#1881) * hide quick add button when javascript is disabled (Shopify#1904) * hide quick add button when javascript disabled * Update PULL_REQUEST_TEMPLATE.md (Shopify#1892) * Update PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md Adding hidden markdown * Update .github/PULL_REQUEST_TEMPLATE.md Co-authored-by: MM <martina.marien@shopify.com> * Update .github/PULL_REQUEST_TEMPLATE.md Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Apply suggestions from code review * Update .github/PULL_REQUEST_TEMPLATE.md * Edit based on feedback Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update Lighthouse CI (Shopify#1898) * Update card style default for collage (Shopify#1922) * Update 1 translation file (Shopify#1924) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update PULL_REQUEST_TEMPLATE.md to include visual change reference (Shopify#1923) * Update PULL_REQUEST_TEMPLATE.md * Change bold to heading markup * Fix slider padding and whitespace issue on Safari (Shopify#1669) * Update 1 translation file (Shopify#1928) * Add a max width to iframes within the product info container (Shopify#1929) * Fix popup cart notification overlap in the latest Safari version (Shopify#1912) * Fix video controls on the feat product section (Shopify#1940) * Update 1 translation file (Shopify#1948) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1949) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1951) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Product page] Add 2 column layout for desktop and mobile (Shopify#1766) * Android menu drawer account fix (Shopify#1945) * Fix android menu drawer not showing account * remove unnecessary code * Update 8 translation files (Shopify#1956) * Use image tag (Shopify#1906) * image_tag in collage * image_tag in multicolumn * image_tag in slideshow * image_tag in image_with_text * image_tag in collapsible-content * image_tag in video * Apply suggestions from code review Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * PR review: Clean up whitespace on capture def Co-authored-by: Kyle Conrad <kcomrade53@gmail.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kyle Conrad <kyle.conrad@shopify.com> * Complementary products (Shopify#1938) * Update translations: buyer (Shopify#1963) * Update 29 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Fix shadow being cut on featured collection slider, featured blog slider and collection list slider (Shopify#1961) * Fix shadow being cut on feat collection slider * Missing commit * Remove file * Rename * Add class * Remove Product Subtitle block from Featured Product section (Shopify#1964) * Remove Text Block for Product Subtitle on Dawn's pre-configured Product Page and Featured Collection sections * Remove caption from block order * Revert change for json templates * [Complementary product] Keep text alignment to the left for horizontal cards (Shopify#1965) * Keep text alignment to the left for horizontal cards * prevent image padding from global product cards settings to apply * Update version and release notes (Shopify#1966) * fix margin-top on middle center header option (Shopify#1970) * Update 1 translation file (Shopify#1967) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * fix slider controls showing in certain scenarios on mobile (Shopify#1973) * fix closing element (Shopify#1981) * Variant media modal fix (Shopify#1985) * Fix duplicate class attr issue * Prevent use of lazy_load variable in complementary block * Ensure complementary block loads card css (Shopify#1991) * [Complementary block] update url from the info text to the latest (Shopify#1974) * update url from the info text to the latest * fix parentheses * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add version bump and release notes (Shopify#1997) * Enable language/country selector by default (Shopify#1988) * Fetch the header (LCP) image at high priority (Shopify#1918) * [Product page] "Icon with text" block (Shopify#1933) Add a new Icon-With-Text block to Product Page * Add shopify attributes to description block on product page (Shopify#2005) * Add variant picker sold out UI [temporary solution] (Shopify#1407) * Move product media gallery and modal into snippets [Refactor] (Shopify#1934) * Move product media gallery and modal into snippets * Gallery snippet api adjustments * Fixes for featured product flexibility * Exclude media_size from gallery api * Update 1 translation file (Shopify#2023) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Remove setting for variant styling (Shopify#2025) * Remove setting for variant styling * wrong edit fix * Update 30 translation files (Shopify#2026) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Minor improvements to product media liquid [Refactor] (Shopify#2022) * Refactor ratio usage in product thumbnail * Fix zoom icon placement and featured product issues * Minor updates * Prevent ui changes from variant selection queues (Shopify#2030) * Prevent hidden Variant Picker block from breaking Quick Add (Shopify#2049) * Fix 'Cannot read properties of null' error in SliderComponent (Shopify#2053) * remove redundant role from SVGs (Shopify#2037) * remove redundant role from SVGs * hide icons from screen readers * Fix z-index issue for mega menu in Safari (Shopify#2034) * Fix z-index issue for mega menu in Safari * add comment with context * small edits * change approach * [PDP] Add SKU block (Shopify#1987) Add SKU block to PDP * Adjust mobile media selectors for new product-thumbnail markup (Shopify#2050) * Add zoom flexibility (Shopify#1983) add 'lightbox', 'hover', and 'none' zoom settings to images * Prevent media background on deferred-media container (Shopify#2068) * Add Inventory status block (Shopify#1979) * [Product page & feat. product] Fix unavailable variant issue (Shopify#2031) * Reset to default * Reset files * Reset changes Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Charles-Philippe Clermont <cp.clermont@shopify.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Kai <KaichenWang@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Talia Harrison-Marcassa <taliahm@users.noreply.github.com> Co-authored-by: Caroline <mllegeorgesand@gmail.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Maximilian Bredow <30573532+bredowmax@users.noreply.github.com> Co-authored-by: Max@SMAKK <max-smakk@MacBook-Pro-4.local> Co-authored-by: LucasLacerdaUX <lucas.lacerda@shopify.com> Co-authored-by: Antonio J <antonio.jhun62@gmail.com> Co-authored-by: Baldur Helgason <baldur.helgason@gmail.com> Co-authored-by: Alexander <alex@inso.codes> Co-authored-by: Lee Siong Chan <leesiongchan@users.noreply.github.com> Co-authored-by: Peretz Cohen <pizzaz93@users.noreply.github.com> Co-authored-by: boltgolt <boltgolt@gmail.com> Co-authored-by: Alistair Lane <alistair.lane@shopify.com> Co-authored-by: Oliviammarcello <60230008+Oliviammarcello@users.noreply.github.com> Co-authored-by: James <james@thoughtandmortar.com> Co-authored-by: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Co-authored-by: Gage <ItsGageHolland@gmail.com> Co-authored-by: Daniel Nieuwenhuizen <danielvan@gmail.com> Co-authored-by: Melissa Perreault <melissaperreault@Melissas-MacBook-Pro.local> Co-authored-by: Yevhenii Huselietov <d46k16@gmail.com> Co-authored-by: Monica Mateiu <monica.mateiu@gmail.com> Co-authored-by: Monica Mateiu <monica.mateiu@shopify.com> Co-authored-by: Sia <siakaramalegos@gmail.com> Co-authored-by: Kasper Andersson <KasperAndersson@users.noreply.github.com> Co-authored-by: Muhammad Abdullah <76752572+dexter845@users.noreply.github.com> Co-authored-by: Nathan Dawson <n_dawson@me.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Robert <treboryx@gmail.com> Co-authored-by: Tyler Rowsell <tyler.rowsell@shopify.com> Co-authored-by: Kyle Conrad <kcomrade53@gmail.com> Co-authored-by: Kyle Conrad <kyle.conrad@shopify.com> Co-authored-by: Lucas Kim <s.lucas.kim@gmail.com> Co-authored-by: Sia <sia.karamalegos@shopify.com> Co-authored-by: CFX <cfxd@users.noreply.github.com>

* Add "Maximum Products to Show" setting to Product Recommendations section (Shopify#1429) * Add missing gradient support (Shopify#1304) * Add missing gradients to cards * Enforce solid bg on quantity input * Add gradient to cart notification * Add to nav, img banner, facets, slideshow, etc * Add to media modal * Add to submenu * Remove search popup gradient * Fix mobile facets scrolling/background * Adjust mobile nav gradients * Cleanup * fix border radius on combination inputs * Fix password page email signup input (Shopify#1421) * Setup theme-check GitHub annotations (Shopify#1422) * test something real quick (Shopify#1467) * Cleanup product media grid spacing (Shopify#1444) * Cleanup product media grid * Adjust grid selectors * Hopefully fix arrow alignment * Fix non-stacked item widths * Update color list order and simplify section string (Shopify#1413) * update color list order * change announcement bar string * fix label * update collapsible content * update email signup banner * update footer * update header * update image banner * update image with text * update password header and footer * update email signup * update rich text and slideshow * update missing translations * Update 20 translation files * Update sections/announcement-bar.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Add mega menu (Shopify#1316) * Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com> * Update translations: merchant (Shopify#1474) * Update 1 translation file (Shopify#1475) * Center align payment terms form text when there is no image (Shopify#1473) * Add grid settings to collections list (Shopify#1469) * Feat. collection updates (Shopify#1295) * Update 20 translation files (Shopify#1487) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Theme check manual fixes (Shopify#1379) * Clean up behaviour when there are only L2 links mega menu (Shopify#1492) * Center mega menu (Shopify#1482) * Update 1 translation file (Shopify#1499) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Video alt text info content update (Shopify#935) * Video alt text info content update * Update locales/en.default.schema.json * Update locales/en.default.schema.json * Update 4 translation files * Update 3 translation files * Update 9 translation files * Update 3 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Adjust color contrast for Vendor on the cart page (Shopify#1462) * Add support for boolean filters (Shopify#1456) * Fixed condensed mega menu (Shopify#1504) * Fixed condensed mega menu * Fixed bug where product page thumbnail slider arrows were appearing when they shouldnt (Shopify#1510) * Fixed multicolumn gap spacing on mobile (Shopify#1505) * Fixed multicolumn gap spacing on mobile * Fixed max price display on filter drawer (Shopify#1512) * Theme check TemplateLength (Shopify#1511) * Add PR checkbox for theme documentation (Shopify#1516) * Add PR checkbox for theme documentation * Update .github/PULL_REQUEST_TEMPLATE.md * Update 1 translation file (Shopify#1517) * Update 1 translation file (Shopify#1528) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1533) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1536) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Quick Add (Shopify#1388) * Featured Collection : Fix max width setting (Shopify#1538) * Fix product rating help doc links (Shopify#1532) * fix links for product rating * Update 20 translation files * update os2 links and remove /en * update other URL to remove the language path * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Prevent empty heading in contact form (Shopify#1515) * Only render contact heading if not empty * Add fallback form heading * Move title string * Update 21 translation files * Update 3 translation files * Update 6 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Move slideshow control buttons when set to autorotate (Shopify#1523) * Update 1 translation file (Shopify#1554) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Hide inactive mobile menu items from screen readers (Shopify#1493) * Hide mobile menu ancestors from screen readers * Account for close button * Cleanup on drawer close * Account for mobile facets drawer * Vertical filter (Shopify#1443) * Remove transforms from image with text content (Shopify#1560) * Fix shop link on giftcard page (Shopify#1557) Co-authored-by: Max@SMAKK <max-smakk@MacBook-Pro-4.local> * Using font size and spacing for mega menu hierarchy (Shopify#1520) * Using font size and spacing for mega menu hierarchy Co-authored-by: LucasLacerdaUX <lucas.lacerda@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update translations: buyer (Shopify#1581) * Update 1 translation file * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Quick Add: Fix button overflow on mobile carousel (Shopify#1567) * Update spacing (Shopify#1588) * Vertical filter UX follow ups (Shopify#1568) * Vertical filter follow ups * Fix button alignment * Fix search sort * Fix sort * Fix wrapping * Fix overflow * Fix empty space * Fix button no js * Fix button style * Fix filter column * Apply secondary style * Apply button * Fix search * Fix no-js layout for drawer and product count position (Shopify#1572) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Update margin formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Update padding formatting Co-authored-by: Ludo <ludo.segura@shopify.com> * Add hidden inputs to preserve search queries (Shopify#1585) * fix no-js layout for drawer and product count position * udpate vertical product count position on drawer on desktop * fix broken html * remove unnecessary facets class * update some logic to fix state after rebase * fix spacing * Add hidden inputs to preserve search queries Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Version bump v5.0.0 (Shopify#1624) * Remove unused setting (Shopify#1617) * Update 5 translation files (Shopify#1626) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1634) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Remove recaptcha visibility hidden on contact form (Shopify#1637) * Fix Product strucure-data markup for Brand property (Shopify#1600) * Fix empty collection links (Shopify#1639) * Fix first image lazy load on main product section (Shopify#1286) * Make sure first image is not lazy loaded * Use a single liquid tag * Update sections/main-product.liquid Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * replace the hex code by currentColor (Shopify#1591) * Cart drawer (Shopify#1544) * Fix button spinner in Safari (Shopify#1646) * Rich text improvements (Shopify#1635) * [Header] add setting to tweak top and bottom padding (Shopify#1654) * Add header padding setting * Update minimum to 5 * Changed defaults * Update header with option 2 * Remove unnecessary code * Update translations: buyer (Shopify#1659) * Update translations: merchant (Shopify#1681) * Remove gradient when slide container is set to be hidden on desktop (Shopify#1643) * Revert flex grow on collage card__content (Shopify#1662) * Update minimum header padding to zero (Shopify#1688) * Fix a typo in main-product.liquid (Shopify#1647) * 1-click Quick Add for products with 1 non-default variant (Shopify#1610) * Add 1-click quick-add support for products with exactly 1 non-default variant * Revert "Add 1-click quick-add support for products with exactly 1 non-default variant" This reverts commit 41648ca. * Add 1-click quick-add support for products with exactly 1 non-default variant * Switch to Variants Size * Update spacing below product media (Shopify#1689) * Update spacing below product media * Update visible * Remove extra spacing * Update desktop layout * Revert button type and button 1 ids (Shopify#1705) * Update Banner image and logo Image to use `image_tag` (Shopify#1701) * Fix product media slider peek (Shopify#1696) * Account for gap spacing in product slider width * Prevent slider arrows with single media * Remove alt text to improve screen reader experience (Shopify#1679) * Update Subtotal header for a11y (Shopify#1680) * Remove extra whitespace on Quick Add modals (Shopify#1706) * Always centered * Non centered * Revert height * Set height to initial height * Revert fixed height * Remove extra * Update 1 translation file (Shopify#1715) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Collapsible content] Add vertical padding to blocks (Shopify#1655) * Fix padding. top and bottom now gets 1.5rem * Set padding-top to 0 * Fix syntax error caused by missing calc in product CSS (Shopify#1703) * Update 1 translation file (Shopify#1739) * Cart drawer section fix (Shopify#1742) * Update translations: merchant (Shopify#1757) * Version bump v6.0.0 (Shopify#1769) * Version bump Update theme version to v6.0.0 * Update release-notes.md * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> * Update release-notes.md Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update release-notes.md Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Fix box shadow being cut off on sliders (Shopify#1772) * Update contact-form.liquid (Shopify#1716) * Update main-cart-items.liquid (Shopify#1717) * Update main-collection-banner.liquid (Shopify#1718) * Remove menu title requirement (Shopify#1763) * Menu heading Remove requirement for menu heading in footer to display * Update footer.liquid * Remove helper text * Remove translations * Update footer * Update footer * Update footer * Update footer * Revert changes * Fixes * Update * Update to footer * Badge padding update (Shopify#1785) * Add video button aria label (Shopify#1728) * Change aria for active pagination nav control (Shopify#1727) * Update 1 translation file (Shopify#1809) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Warn users that link opens in a new window (Shopify#1735) * Add unique ids to card-product.liquid headings and product state badges (Shopify#1731) * Badge product card position copy update (Shopify#1795) * Badge product card position copy update * Update 7 translation files * Update 3 translation files * Update 6 translation files * Update 3 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Distinct View All IDs for screen readers (Shopify#1733) * Fix Quick Add when cart type is set to Page (remove data-cart-type) (Shopify#1817) * Replaced a missing </div> tag in main-search.liquid (Shopify#1804) * version bump to 6.0.2 (Shopify#1819) * Add help text to the Variant Pills settings area (Shopify#1782) * Add help text to the Variant Pills settings section. * Update copy as per reviews. * Update 5 translation files * Update 4 translation files * Update 8 translation files * Update 2 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update translations: buyer (Shopify#1828) * Update 1 translation file * Update locales/th.json Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Update translations: merchant (Shopify#1818) * Update 1 translation file * Update 1 translation file * Update 1 translation file * Update locales/th.schema.json * Update 1 translation file * Update th.schema.json Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Remove duplicate .hidden class in base.css (Shopify#1811) * Setting border-top to 0.1rem to match with header navigation (Shopify#1802) updating component-facets.css to match div line width from the header * Add period to Cart global setting info text (Shopify#1751) * add period to info text * Update 1 translation file * Update 9 translation files * Update 9 translation files * Update 1 translation file Co-authored-by: Melissa Perreault <melissaperreault@Melissas-MacBook-Pro.local> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add focus ring/border in Windows High Contrast mode (Shopify#1729) * Update 1 translation file (Shopify#1836) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Announcment alignment (Shopify#1770) * Announcement and translation * Alignment for announcement bar * Translations * Update alignment and order of options. * Update locales/th.schema.json Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> * Uniform padding with link * Make colour go full width * Full width hover and justify text * Update sections/announcement-bar.liquid Co-authored-by: Ludo <ludo.segura@shopify.com> * Remove justify * Remove justify Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Ludo <ludo.segura@shopify.com> * Add pagination to main collection list (Shopify#1745) * Jsonify customer sections (Shopify#1640) * Update translations: merchant (Shopify#1843) * Update 20 translation files * Update 1 translation file * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1849) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update PULL_REQUEST_TEMPLATE.md * Remove CLA from probot and use new GitHub action (Shopify#1859) * Update 1 translation file (Shopify#1862) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add `reopened` activity type (Shopify#1874) * add vendor to popup notification when vendor checkbox is checked (Shopify#1870) * Add proper product title to data-shopify-title (Shopify#1858) * Update 1 translation file (Shopify#1872) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Use param_name instead of label to construct an id for filter values (Shopify#839) * Fix linting issues in feature-product and main-product sections (Shopify#1873) * fix linting issues in feature-product and main-product sections * use button--secondary when dynamic checkout or subscriptions enabled (Shopify#1875) * [Card Settings] Break card global settings into Blog, Collection and Product Cards (Shopify#1774) * [Header] New logo position (Shopify#1864) * update predictive search container width (Shopify#1878) * update predictive search container width on small screens * Update 20 translation files (Shopify#1891) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Fix filter bug to allow filters to be removed (Shopify#1890) * [Product layout] Add desktop media position (Shopify#1720) * Update 2 translation files (Shopify#1896) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Switch blog header img to eager instead of lazy load (Shopify#1894) * Update 1 translation file (Shopify#1899) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * fix(sections/header): remove duplicated classnames (Shopify#1853) * change done in pickup availability (Shopify#1831) * Fix spaces in menu IDs by replacing titles with handles (Shopify#1846) * Increase left and top edge for zoom-icon element (Shopify#1902) * Increase left and top edge for zoom-icon element * Minor changes that I forgot undo * Delete unnecessary whitespace * Change left and top edges to 1.2rem * fix: drawer - typing in quantity and pressing enter empties cart (Shopify#1881) * hide quick add button when javascript is disabled (Shopify#1904) * hide quick add button when javascript disabled * Update PULL_REQUEST_TEMPLATE.md (Shopify#1892) * Update PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md Adding hidden markdown * Update .github/PULL_REQUEST_TEMPLATE.md Co-authored-by: MM <martina.marien@shopify.com> * Update .github/PULL_REQUEST_TEMPLATE.md Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Apply suggestions from code review * Update .github/PULL_REQUEST_TEMPLATE.md * Edit based on feedback Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * Update Lighthouse CI (Shopify#1898) * Update card style default for collage (Shopify#1922) * Update 1 translation file (Shopify#1924) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update PULL_REQUEST_TEMPLATE.md to include visual change reference (Shopify#1923) * Update PULL_REQUEST_TEMPLATE.md * Change bold to heading markup * Fix slider padding and whitespace issue on Safari (Shopify#1669) * Update 1 translation file (Shopify#1928) * Add a max width to iframes within the product info container (Shopify#1929) * Fix popup cart notification overlap in the latest Safari version (Shopify#1912) * Fix video controls on the feat product section (Shopify#1940) * Update 1 translation file (Shopify#1948) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1949) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Update 1 translation file (Shopify#1951) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * [Product page] Add 2 column layout for desktop and mobile (Shopify#1766) * Android menu drawer account fix (Shopify#1945) * Fix android menu drawer not showing account * remove unnecessary code * Update 8 translation files (Shopify#1956) * Use image tag (Shopify#1906) * image_tag in collage * image_tag in multicolumn * image_tag in slideshow * image_tag in image_with_text * image_tag in collapsible-content * image_tag in video * Apply suggestions from code review Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> * PR review: Clean up whitespace on capture def Co-authored-by: Kyle Conrad <kcomrade53@gmail.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Kyle Conrad <kyle.conrad@shopify.com> * Complementary products (Shopify#1938) * Update translations: buyer (Shopify#1963) * Update 29 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Fix shadow being cut on featured collection slider, featured blog slider and collection list slider (Shopify#1961) * Fix shadow being cut on feat collection slider * Missing commit * Remove file * Rename * Add class * Remove Product Subtitle block from Featured Product section (Shopify#1964) * Remove Text Block for Product Subtitle on Dawn's pre-configured Product Page and Featured Collection sections * Remove caption from block order * Revert change for json templates * [Complementary product] Keep text alignment to the left for horizontal cards (Shopify#1965) * Keep text alignment to the left for horizontal cards * prevent image padding from global product cards settings to apply * Update version and release notes (Shopify#1966) * fix margin-top on middle center header option (Shopify#1970) * Update 1 translation file (Shopify#1967) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * fix slider controls showing in certain scenarios on mobile (Shopify#1973) * fix closing element (Shopify#1981) * Variant media modal fix (Shopify#1985) * Fix duplicate class attr issue * Prevent use of lazy_load variable in complementary block * Ensure complementary block loads card css (Shopify#1991) * [Complementary block] update url from the info text to the latest (Shopify#1974) * update url from the info text to the latest * fix parentheses * Update 20 translation files Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Add version bump and release notes (Shopify#1997) * Enable language/country selector by default (Shopify#1988) * Fetch the header (LCP) image at high priority (Shopify#1918) * [Product page] "Icon with text" block (Shopify#1933) Add a new Icon-With-Text block to Product Page * Add shopify attributes to description block on product page (Shopify#2005) * Add variant picker sold out UI [temporary solution] (Shopify#1407) * Move product media gallery and modal into snippets [Refactor] (Shopify#1934) * Move product media gallery and modal into snippets * Gallery snippet api adjustments * Fixes for featured product flexibility * Exclude media_size from gallery api * Update 1 translation file (Shopify#2023) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Remove setting for variant styling (Shopify#2025) * Remove setting for variant styling * wrong edit fix * Update 30 translation files (Shopify#2026) Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> * Minor improvements to product media liquid [Refactor] (Shopify#2022) * Refactor ratio usage in product thumbnail * Fix zoom icon placement and featured product issues * Minor updates * Prevent ui changes from variant selection queues (Shopify#2030) * Prevent hidden Variant Picker block from breaking Quick Add (Shopify#2049) * Fix 'Cannot read properties of null' error in SliderComponent (Shopify#2053) * remove redundant role from SVGs (Shopify#2037) * remove redundant role from SVGs * hide icons from screen readers * Fix z-index issue for mega menu in Safari (Shopify#2034) * Fix z-index issue for mega menu in Safari * add comment with context * small edits * change approach * [PDP] Add SKU block (Shopify#1987) Add SKU block to PDP * Adjust mobile media selectors for new product-thumbnail markup (Shopify#2050) * Add zoom flexibility (Shopify#1983) add 'lightbox', 'hover', and 'none' zoom settings to images * Prevent media background on deferred-media container (Shopify#2068) * Add Inventory status block (Shopify#1979) * [Product page & feat. product] Fix unavailable variant issue (Shopify#2031) Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Andrew Etchen <andrew.etchen@shopify.com> Co-authored-by: Charles-Philippe Clermont <cp.clermont@shopify.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: Ludo <ludo.segura@shopify.com> Co-authored-by: Kai <KaichenWang@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com> Co-authored-by: Talia Harrison-Marcassa <taliahm@users.noreply.github.com> Co-authored-by: Caroline <mllegeorgesand@gmail.com> Co-authored-by: Tyler Alsbury <60230011+tyleralsbury@users.noreply.github.com> Co-authored-by: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com> Co-authored-by: Maximilian Bredow <30573532+bredowmax@users.noreply.github.com> Co-authored-by: Max@SMAKK <max-smakk@MacBook-Pro-4.local> Co-authored-by: LucasLacerdaUX <lucas.lacerda@shopify.com> Co-authored-by: Antonio J <antonio.jhun62@gmail.com> Co-authored-by: Baldur Helgason <baldur.helgason@gmail.com> Co-authored-by: Alexander <alex@inso.codes> Co-authored-by: Lee Siong Chan <leesiongchan@users.noreply.github.com> Co-authored-by: Peretz Cohen <pizzaz93@users.noreply.github.com> Co-authored-by: boltgolt <boltgolt@gmail.com> Co-authored-by: Alistair Lane <alistair.lane@shopify.com> Co-authored-by: Oliviammarcello <60230008+Oliviammarcello@users.noreply.github.com> Co-authored-by: James <james@thoughtandmortar.com> Co-authored-by: Kjell Reigstad <1202812+kjellr@users.noreply.github.com> Co-authored-by: Gage <ItsGageHolland@gmail.com> Co-authored-by: Daniel Nieuwenhuizen <danielvan@gmail.com> Co-authored-by: Melissa Perreault <melissaperreault@Melissas-MacBook-Pro.local> Co-authored-by: Yevhenii Huselietov <d46k16@gmail.com> Co-authored-by: Monica Mateiu <monica.mateiu@gmail.com> Co-authored-by: Monica Mateiu <monica.mateiu@shopify.com> Co-authored-by: Sia <siakaramalegos@gmail.com> Co-authored-by: Kasper Andersson <KasperAndersson@users.noreply.github.com> Co-authored-by: Muhammad Abdullah <76752572+dexter845@users.noreply.github.com> Co-authored-by: Nathan Dawson <n_dawson@me.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Robert <treboryx@gmail.com> Co-authored-by: Tyler Rowsell <tyler.rowsell@shopify.com> Co-authored-by: Kyle Conrad <kcomrade53@gmail.com> Co-authored-by: Kyle Conrad <kyle.conrad@shopify.com> Co-authored-by: Lucas Kim <s.lucas.kim@gmail.com> Co-authored-by: Sia <sia.karamalegos@shopify.com> Co-authored-by: CFX <cfxd@users.noreply.github.com>

* Simplify header dropdown menu CSS selectors * Create popup utility class to apply popup global settings styles * Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css * Fix indent * Add info to menu type setting * Remove condition for showing dropdown menus for subcategories with no children * Force zero border-radius and top/bottom border for mega menu container since it's full width * Update 1 translation file * Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS * Add todo * Show mega menu top border only if header does not have separator line enabled * Remove empty line * Update 16 translation files * Update 3 translation files * Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead * Update assets/component-mega-menu.css Co-authored-by: MM <martina.marien@shopify.com> * Rename utility class * Add mega menu content layout and styles (Shopify#1338) * Add grid for mega menu content and styles for links * Remove role="list" from ul elements since list is ul elements' default role * Adjust link styles * Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation * Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS * Fix spacing * Change level 2 link color to better distinguish from level 3 links * Revert mega menu heading opacity to improve color contrast * Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content # Conflicts: # snippets/mega-menu.liquid * Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Fix typo * Combine css properties for same class * Set mega menu links to display block to ensure bigger touch target * Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu * Update link style (remove uppercase) for 2nd level links that have no children * Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000 * Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role) * Use rem instead of px * Remove redundant css * Update line height to account for body scale * Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed * Remove usage of --viewport-height since its value may not have been set * Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure * Update logic to set --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com> Co-authored-by: MM <martina.marien@shopify.com>

Add grid for mega menu content and styles for links

c8eb925

KaichenWang mentioned this pull request Feb 9, 2022

Mega Menu #947

Open

6 tasks

KaichenWang added 7 commits February 10, 2022 11:36

Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into …

c6072ef

…add-mega-menu-content # Conflicts: # assets/component-mega-menu.css

Remove role="list" from ul elements since list is ul elements' defaul…

9e48c1d

…t role

Adjust link styles

9bc5135

Set mega menu content max height based on viewport height. Use header…

1df2554

… bottom position set in JS for calculation

Round position value down instead of up to be more consistent with ot…

00c3611

…her instances where --header-bottom-position value is set in JS

Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into …

c2e683f

…add-mega-menu-content

Fix spacing

b1fdb18

KaichenWang changed the title ~~Add grid for mega menu content and styles for links~~ Add mega menu content layout and styles Feb 11, 2022

KaichenWang marked this pull request as ready for review February 14, 2022 20:51

KaichenWang requested a review from duygukalaycioglu February 14, 2022 21:01

duygukalaycioglu approved these changes Feb 15, 2022

View reviewed changes

Change level 2 link color to better distinguish from level 3 links

7259216

Update L2 link font to bold. Use Liquid to calculate bold font-weight…

2b14cee

… value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000

KaichenWang requested review from ludoboludo and martinamarien March 1, 2022 16:14

ludoboludo approved these changes Mar 3, 2022

View reviewed changes

martinamarien approved these changes Mar 4, 2022

View reviewed changes

KaichenWang added 3 commits March 7, 2022 12:31

Address feedback. Add explicit role="list" for a11y (when list bullet…

cff04b6

…s are removed some assistive technologies may not convey ul as list without explicit role)

Use rem instead of px

630713d

Remove redundant css

fb5671f

KaichenWang merged commit 7823f89 into add-mega-menu Mar 7, 2022

KaichenWang deleted the add-mega-menu-content branch March 7, 2022 18:47

KaichenWang mentioned this pull request Jan 19, 2023

Clean up redundant ARIA roles #2212

Open

9 tasks

		const header = document.querySelector('header');
		if (header) document.documentElement.style.setProperty('--header-bottom-position', `${Math.floor(header.getBoundingClientRect().bottom)}px`);

Add mega menu content layout and styles #1338

Add mega menu content layout and styles #1338

Conversation

KaichenWang commented Feb 9, 2022 • edited Loading

Why are these changes introduced?

What approach did you take?

Add grid layout to mega menu content

Style links

Set mega menu max-height

Other considerations

Testing steps/scenarios

Demo links

Checklist

KaichenWang commented Feb 11, 2022 • edited Loading

To confirm

Specifications

Implemented:

Not implemented:

duygukalaycioglu commented Feb 14, 2022 • edited Loading

duygukalaycioglu commented Feb 14, 2022

duygukalaycioglu commented Feb 15, 2022

KaichenWang commented Feb 15, 2022

tyleralsbury commented Feb 15, 2022

nicklepine commented Feb 15, 2022 • edited by nate-young Loading

duygukalaycioglu commented Feb 15, 2022 • edited Loading

duygukalaycioglu commented Feb 15, 2022

KaichenWang commented Feb 16, 2022

duygukalaycioglu commented Feb 16, 2022

KaichenWang commented Feb 16, 2022 • edited Loading

danielvan commented Feb 17, 2022 • edited Loading

duygukalaycioglu commented Feb 17, 2022

svinkle commented Feb 17, 2022

duygukalaycioglu commented Feb 17, 2022

KaichenWang commented Feb 23, 2022

Level-2 links with no children

Additional discussion on columns

6-column grid

"auto-fit" grid

duygukalaycioglu commented Feb 23, 2022 • edited by nate-young Loading

nicklepine commented Feb 23, 2022

danielvan commented Feb 24, 2022 • edited by nate-young Loading

KaichenWang commented Feb 24, 2022

duygukalaycioglu commented Feb 25, 2022 • edited by nate-young Loading

KaichenWang commented Feb 28, 2022 • edited Loading

Outcome

Update

Decision

KaichenWang commented Mar 1, 2022 • edited Loading

katycobb commented Mar 1, 2022 • edited Loading

ludoboludo left a comment

Choose a reason for hiding this comment

gregjotau commented Mar 3, 2022

martinamarien left a comment

Choose a reason for hiding this comment

martinamarien Mar 4, 2022

Choose a reason for hiding this comment

KaichenWang Mar 7, 2022

Choose a reason for hiding this comment

martinamarien Mar 4, 2022

Choose a reason for hiding this comment

martinamarien Mar 4, 2022

Choose a reason for hiding this comment

KaichenWang Mar 7, 2022

Choose a reason for hiding this comment

martinamarien Mar 4, 2022

Choose a reason for hiding this comment

KaichenWang Mar 7, 2022

Choose a reason for hiding this comment

selvanwitap commented Mar 6, 2022

gregjotau commented Mar 6, 2022

KaichenWang commented Mar 7, 2022 • edited Loading

KaichenWang commented Feb 9, 2022 •

edited

Loading

KaichenWang commented Feb 11, 2022 •

edited

Loading

duygukalaycioglu commented Feb 14, 2022 •

edited

Loading

nicklepine commented Feb 15, 2022 •

edited by nate-young

Loading

duygukalaycioglu commented Feb 15, 2022 •

edited

Loading

KaichenWang commented Feb 16, 2022 •

edited

Loading

danielvan commented Feb 17, 2022 •

edited

Loading

duygukalaycioglu commented Feb 23, 2022 •

edited by nate-young

Loading

danielvan commented Feb 24, 2022 •

edited by nate-young

Loading

duygukalaycioglu commented Feb 25, 2022 •

edited by nate-young

Loading

KaichenWang commented Feb 28, 2022 •

edited

Loading

KaichenWang commented Mar 1, 2022 •

edited

Loading

katycobb commented Mar 1, 2022 •

edited

Loading

KaichenWang commented Mar 7, 2022 •

edited

Loading